<template>

  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>工具栏</span>
        <el-button style="float: right; padding: 1px 0" type="text">设置</el-button>
      </div>

      <div style="width: 100%;text-align: center">

          <div v-for="(tool,index) in appList">

            <div style="width: 23%;height: 100px;margin: 5px 5px 5px 5px;float:left">
              <a :href="tool.toolUrl">
                <img :src="tool.toolLogo" :alt="tool.toolName" style="width: 70px;height: 70px">
              </a>
              <el-link :href="tool.toolUrl" target="_blank">
                {{tool.toolName}}
              </el-link>
            </div>
          </div>
        </div>

    </el-card>


  </div>

</template>

<script>
  export default {
    name: 'appToolbar',
    data() {
      return {
        appList: [
          { toolName: '我的项目1', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目2', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目3', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目4', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目5', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目6', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目7', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' },
          { toolName: '我的项目8', toolLogo: '/oa-system/static/img/logo.732c102d.png', toolUrl: 'https://www.baidu.com' }

        ]

      }
    }
  }
</script>

<style scoped>

</style>
